<template>
  <div class="container-echart">
    <div :id="'echart' + timeId" class="interface-echart"></div>
  </div>
</template>
  <script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsType } from "echarts";
import { onMounted, ref, watch, onBeforeUnmount, nextTick } from "vue";

const props = defineProps({
  xDataArray: {
    // 柱形图x轴数据
    type: Array,
    default: function () {
      return ["1", "2", "3", "4", "5", "6", "7"];
    },
  },
  yDataArray: {
    //图标信息提示
    type: Array,
    default: function () {
      return [
        {
          name: "图例二",
          type: "bar",
          label: {
            // 柱状图上的文字设置
            show: true, // 是否显示
            //   rotate: 60, // 文字旋转角度
            position: "top", // 显示位置
          },
          // barWidth: '50%', // 柱的宽度
          barGap: "5%", // 多个并排柱子设置柱子之间的间距
          data: [2, 12, 7, 5, 7, 4, 20],
        },
        {
          name: "图例三",
          type: "bar",
          label: {
            show: true, // 是否显示
            position: "top", // 显示位置
          },
          barGap: "5%", // 多个并排柱子设置柱子之间的间距
          data: [4, 2, 5, 8, 4, 2, 10],
        },
      ];
    },
  },
});
let myEchart: EChartsType;
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
  const option = {
    // title: {
    //   text: '接口请求耗时分布', // 标题文字
    //   textStyle: {
    //     color: '#C0C4CC', // 标题样式设置
    //     fontWeight: 'bold' // 标题文字大小
    //   }
    // },
    legend: {
      //图标信息提示
      type: "scroll",
      orient: "horizontal",
      //   right: '50%',
      left: "40%",
      top: 0,
      //   bottom: 20,
      align: "auto",
      icon: "circle",
    },
    grid: {
      //图表距离边框的偏离
      right: "5%", //图表距离容器右侧距离
      left: "10%",
      top: "20%",
      bottom: "20%",
    },
    tooltip: { trigger: "axis" }, // 设置图案和容器的距离
    xAxis: {
      type: "category",
      //   name: '时间',
      nameLocation: "end",
      data: props.xDataArray,
      //   axisLabel: {
      //     interval: 20 //制显示间隔
      //     // rotate: 60 // 设置倾斜角度
      //   }
      //   // 坐标轴轴线
      //   axisLine: {
      //     show: false
      //   },
      //   // 坐标轴刻度
      //   axisTick: {
      //     show: false
      //   },
      //   // 刻度标签
      //   axisLabel: {
      //     show: false
      //   }
    },
    yAxis: {
      type: "value",
      //   name: '值',
      nameLocation: "end",
      //   // 坐标轴轴线
      //   axisLine: {
      //     show: false
      //   },
      //   // 坐标轴刻度
      //   axisTick: {
      //     show: false
      //   },
      //   // 刻度标签
      //   axisLabel: {
      //     show: false
      //   },
      min: 0,
      //   splitLine: {
      //     show: false // 不显示网格线
      //   }
      // axisLabel: { formatter: '{value} ' },
    },
    series: props.yDataArray,
    dataZoom: [
      // 数据选择范围 最下面的范围拉条
      {
        type: "slider", // 开启滑动条
        show: true, // 显示缩放条
        start: 0,
        end: 100,
        backgroundColor: "#26CAF026",
        selectedDataBackground: {
          lineStyle: {
            type: "dotted",
          },
          areaStyle: {
            color: "#26CAF0",
          },
        },
        // handleSize: '150%',
        bottom: "3%",
        height: 10,
        brushSelect: false,
        handleIcon:
          "image://",
      },
    ],
  };
  // { notMerge: true } 解决删除数据时,数据不刷新的问题
  myEchart.setOption(option, { notMerge: true });
};

watch(
  //监控数据变化
  () => props.xDataArray,
  () => {
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  { deep: true }
);
watch(
  //监控数据变化
  () => props.yDataArray,
  () => {
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  { deep: true }
);
onMounted(() => {
  setTimeout(() => {
    const dom = document.getElementById(`echart${timeId.value}`) as any;
    myEchart = echarts.init(dom);
    myEchartData();
  }, 500);

  // 当窗口发生变化时
  window.addEventListener("resize", () => {
    myEchart.resize();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    myEchart.resize();
  });
});
</script>
  <style scoped>
.container-echart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.interface-echart {
  width: 100%;
  height: 400px;
}
</style>